<template>
	<div id="education">
		
		<div class="main">
			
			<router-link class="audio" to='musiccontent'>
				<div class="audio-img">
					<img class="img-one" src="../../../../../static/home/Pause.png" width="25px" height="25px" />
				</div>
				<div class="autio-title">
					<p class="subtitle">早读 | 像故事'投诚'的心理机制</p>
					<p class="autio-time">
						<img src="../../../../../static/home/music.png" width="15px" height="15px" />
						<span class="color">时长22分41秒</span>
					</p>
				</div>
			</router-link>
			
			
			<router-link class="audio" to='musiccontent'>
				<div class="audio-img">
					<img class="img-one" src="../../../../../static/home/Pause.png" width="25px" height="25px" />
				</div>
				<div class="autio-title">
					<p class="subtitle">早读 | 像故事'投诚'的心理机制</p>
					<p class="autio-time">
						<img src="../../../../../static/home/music.png" width="15px" height="15px" />
						<span class="color">时长22分41秒</span>
					</p>
				</div>
			</router-link>
			
			<router-link class="audio" to='musiccontent'>
				<div class="audio-img">
					<img class="img-one" src="../../../../../static/home/Pause.png" width="25px" height="25px" />
				</div>
				<div class="autio-title">
					<p class="subtitle">早读 | 像故事'投诚'的心理机制</p>
					<p class="autio-time">
						<img src="../../../../../static/home/music.png" width="15px" height="15px" />
						<span class="color">时长22分41秒</span>
					</p>
				</div>
			</router-link>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	/*--------- audio ------- */
	
	.main .audio {
		width: 95%;
		background-color: #FFFFFF;
		border: 1px solid #f2f2f2;
		box-shadow: darkgrey 1px 1px 2px;
		border-radius: 8px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 14px;
	}
	
	.main .audio .audio-img {
		width: 50px;
		height: 50px;
		margin: 15px 0 15px 15px;
		background: url(../../../../../static/music.png) no-repeat;
		background-size: cover;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.main .audio .autio-title {
		margin-left: 20px;
		font-size: 15px;
		color: #252525;
	}
	
	.main .audio .autio-title .subtitle {
		margin-bottom: 12px;
	}
	
	.main .audio .autio-title .autio-time {
		font-size: 12px;
		color: #252525;
		display: flex;
		align-items: center;
	}
	
	.main .audio .autio-time span {
		margin-left: 14px;
	}
	
	.main .audio .autio-time .color {
		color: #e60012;
	}
</style>